<template>
  <div class="communityLeft-box">
    <!-- 热门用户 -->
    <!-- <div class="hotuser hottool">
      <el-scrollbar height="100%">
        <div class="hottitle-container">
          <div class="hottitle">热门工具</div>
          <div
            class="hotitem f-a-c click"
            @click="hotinfoClick(item)"
            v-for="(item, index) in hotinfo"
            :key="index"
          >
            <img :src="item.img" alt="" />
            <div class="hotcontent f-d-c">
              <span class="ellipsis">{{ item.name }}</span>

              <span class="ellipsis">{{ item.introduce }}</span>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div> -->

    <div class="hotuser" style="padding: 20px 9px">
      <div class="hottitle">每日任务</div>
      <div class="renwu f-a-c f-j-sb-a-c" v-for="(item, index) in SignIn" :key="index">
        <div class="renwuleft f-d-c">
          <span>{{ item.name }}</span>
          <div class="leftitem f-a-c">
            <svg-icon name="icon-ranyous" class="svg"></svg-icon>
            <span>{{ item.reward_tip }}</span>
          </div>
        </div>
        <div
          class="f-j-a-c click"
          @click="getcomplete(item)"
          :class="
            item.status == 1 ? 'wancheng' : item.status == 2 ? 'success' : 'rightbutton'
          "
        >
          {{
            item.status == 1
              ? "已完成"
              : item.status == 2
              ? "领取奖励"
              : item.status == 0
              ? "去完成"
              : ""
          }}
        </div>
      </div>
      <div class="nodata" v-if="!SignIn.length">
        <noData></noData>
      </div>

      <div class="hottitle" style="padding-top:20px;" v-if="taskHall.length">成长任务</div>
      <div class="renwu f-a-c f-j-sb-a-c" v-for="(item, index) in taskHall" :key="index">
        <div class="renwuleft f-d-c">
          <span>{{ item.name }}</span>
          <div class="leftitem f-a-c">
            <svg-icon name="icon-ranyous" class="svg"></svg-icon>
            <span>{{ item.reward_tip }}</span>
          </div>
        </div>
        <div
          class="f-j-a-c click"
          @click="getcomplete(item)"
          :class="
            item.status == 1 ? 'wancheng' : item.status == 2 ? 'success' : 'rightbutton'
          "
        >
          {{
            item.status == 1
              ? "已完成"
              : item.status == 2
              ? "领取奖励"
              : item.status == 0
              ? "去完成"
              : ""
          }}
        </div>
      </div>




     
    </div>

    <div class="moban" v-if="closeCheck"></div>
  </div>

  <div class="qiandao" v-if="closeCheck" v-ClickOutside.stop="() => (closeCheck = false)">
    <div class="box">
      <span>签到成功 恭喜获得</span>
      <svg-icon name="lihe" class="lihe"></svg-icon>
    </div>
    <div class="boxitem">
      <div class="boxcenter f-j-a-c f-d-c">
        <span
          >你已经连续签到<span class="red">{{ qiandaolist.today_signed }}</span
          >天</span
        >
        <div class="boxp f-j-a-c">·连续七天可获得三倍奖励·</div>
      </div>

      <div class="qiandoa f-a-c f-j-a-c">
        <div
          class="qiandaoitem f-d-c f-j-a-c click"
          v-for="(item, index) in qiandaolist.list"
          :key="index"
          :class="item.state == 1 ? 'bgc' : ''"
          @click="qiandao(item.id)"
        >
          <span :class="item.state == 1 ? 'bluespan' : ''" style="margin-bottom: 10px">{{
            item.day
          }}</span>
          <div style="position: relative">
            <svg-icon
              :name="item.state == 1 ? 'icon-ranyou-10' : 'icon-ranyou-hui'"
              class="svgranyou"
            ></svg-icon>
            <span class="shuzi">{{ item.integral }}</span>
          </div>

          <span :class="item.state == 1 ? 'red' : ''" style="margin-top: 10px">{{
            item.state == 1 ? "已签到" : "未签到"
          }}</span>
        </div>
      </div>
      <div class="zhidaole click f-j-a-c" @click="close">知道了</div>
    </div>
  </div>
</template>
<script>
import ClickOutside from "element-plus/lib/directives/click-outside/index";
import { ElMessage } from "element-plus";

import { signtask, complete, sign, taskHall } from "@/axios/community.js";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
export default defineComponent({
  directives: { ClickOutside },

  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();
    let data = reactive({
      closeCheck: false,
      qiandaolist: [],
      hotinfo: [
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817453630%E5%9B%BE%E7%89%871.png",
          name: "在线抠图",
          introduce: "热门在线抠图网站",
          url: "https://www.remove.bg/zh",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817563223%E5%9B%BE%E7%89%872.png",
          name: "自动裁剪",
          introduce: "自动聚焦裁剪图片尺寸",
          url: "https://www.birme.net/?target_width=512&target_height=512&rename_start=1",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817603624%E5%9B%BE%E7%89%873.png",
          name: "无限扩图",
          introduce: "扩展图幅",
          url: "https://www.fotor.com/images/create",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817603624%E5%9B%BE%E7%89%873.png",
          name: "内部绘制",
          introduce: "涂抹修改局部图片",
          url: "https://www.fotor.com/images/create",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817453630%E5%9B%BE%E7%89%871.png",
          name: "图像变换",
          introduce: "一张图生成无限可能",
          url: "https://www.remove.bg/zh",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817726304%E5%9B%BE%E7%89%875.png",
          name: "替换背景",
          introduce: "AI换背景，自动虚化背景",
          url: "https://app.photoroom.com/",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817760138%E5%9B%BE%E7%89%876.png",
          name: "AI插帧",
          introduce: "图片插帧变成视频",
          url: "https://runwayml.com/ai-magic-tools/frame-interpolation/",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817817082%E5%9B%BE%E7%89%877.png",
          name: "放大图片",
          introduce: "AI高清化图片放大",
          url: "https://imgupscaler.com/",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817858031%E5%9B%BE%E7%89%878.png",
          name: "打光",
          introduce: "给你的照片打光补光",
          url: "https://clipdrop.co/relight",
        },
        {
          img:
            "https://i-desai.oss-cn-hangzhou.aliyuncs.com/upload/1689817898215%E5%9B%BE%E7%89%879.png",
          name: "2D变动画",
          introduce: "图片变深度图动画",
          url: "https://convert.leiapix.com/",
        },
      ],
      SignIn: [],

      taskHall:[],
    });
    let getsigntask = () => {
      signtask().then((res) => {
        data.SignIn = res.data.task;
        data.qiandaolist = res.data.sign;
        // console.log(res);
      });
    };


    // 获取成长任务
    let getTaskHall = ()=>{
      taskHall({
        type:1
      }).then(res=>{
        data.taskHall = res.data.data
      })

    };


    // 点击
    let hotinfoClick = (item) => {
      window.open(item.url, "_blank");
    };
    // 领取奖励
    let getcomplete = (item) => {
      if (item.status == 0 && item.name == "每日签到") {
        data.closeCheck = true;
        return;
      }

      if (item.status == 2) {
        complete({ task_id: item.id }).then((res) => {
          ElMessage.success("领取成功");
          item.status = 1;
        });
      }
    };
    //
    let qiandao = () => {
      sign().then((res) => {
        ElMessage.success("签到成功!");
        getsigntask();
      });
    };
    let close = () => {
      data.closeCheck = false;
    };
    onMounted(() => {
      if (store.state.minToken) {
        setTimeout(() => {
          getsigntask();
          getTaskHall();
        }, 100);
      }
    });
    return {
      hotinfoClick,
      close,
      qiandao,
      getcomplete,
      getsigntask,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.hottool {
  height: 769px;
  overflow: auto;
  padding: 0 !important;
}

.hottitle-container {
  padding: 20px !important;
}
.moban {
  position: fixed;
  top: 0;
  width: 100vw;
  left: 0;
  z-index: 30;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.zhidaole {
  margin-top: 35px;
  width: 315px;
  height: 50px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  color: #ffffff;
}
.boxitem {
  position: relative;
  z-index: 17;
  margin-top: 12px;
  width: 380px;
  height: 400px;
  background: #ffffff;
  border-radius: 40px 40px 40px 40px;
  opacity: 1;
  padding: 20px 31px;
  .boxcenter {
    margin: 0 auto;

    > span {
      text-align: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    .boxp {
      margin: 10px 0 0 0;
      width: 200px;
      height: 24px;
      background: rgba(100, 200, 220, 0.1);
      border-radius: 98px 98px 98px 98px;
      opacity: 1;

      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #64c8dc;
    }
  }
}
.bgc {
  background-color: rgba(100, 200, 220, 0.1) !important;
}
.bluespan {
  color: #64c8dc !important;
}
.red {
  color: #ff5547 !important;
}
.shuzi {
  position: absolute;
  top: 61%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 4px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 500;
  color: #ffffff;
}
.qiandoa {
  flex-wrap: wrap;
  z-index: 50;
  .qiandaoitem {
    margin-top: 20px;
    margin-right: 20px;
    width: 64px;
    background: #f3f4f5;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    padding: 11px 13px;
    .svgranyou {
      font-size: 20px;
    }
    > span {
      font-size: 12px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #656f79;
    }
    &:nth-child(4) {
      margin-right: 0;
    }
  }
}
.qiandao {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 410px;
  height: 480px;
  // border-radius: 20px;
  // background: linear-gradient(314deg, #9ed8e6 0%, #a1f0c0 100%);
  background-image: url("../../../../assets/image/sqqdbjt.png");
  background-size: 100% 100%;
  opacity: 1;
  z-index: 50;
  padding: 22px 16px;
  .box {
    position: relative;
    > span {
      font-size: 24px;
      font-family: HelloFont WenYiHei-Regular, HelloFont WenYiHei;
      font-weight: 700;
      color: #2a5157;
    }
  }

  .lihe {
    position: absolute;
    top: -65px;
    right: -5px;
    font-size: 150px;
  }
}

.communityLeft-box {
  // width: 240px;
  // height: 300px;
  // background: red;
  // background: #ffffff;
  min-width: 240px;
  // z-index: 10;
}
.renwu {
  margin-top: 10px;
  .renwuleft {
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    .leftitem {
      .svg {
        font-size: 14px;
      }
      > span {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #fab025;
      }
    }
  }
}
.rightbutton {
  width: 72px;
  height: 26px;
  border-radius: 83px 83px 83px 83px;
  opacity: 1;
  border: 1px solid #64c8dc;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #64c8dc;
}
.success {
  width: 72px;
  height: 26px;
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
  border-radius: 83px 83px 83px 83px;
  opacity: 1;
  font-size: 14px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.wancheng {
  width: 72px;
  height: 26px;
  background-color: #f3f4f5;
  color: #656f79;
  font-size: 14px;
  border-radius: 83px 83px 83px 83px;
}
.hotuser {
  width: 240px;
  // height: 453px;
  // margin-top: 10px;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  .hottitle {
    font-size: 14px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: 700;
    color: #000000;
  }
  .hotitem {
    align-items: flex-start;
    margin-top: 30px;
    > img {
      width: 48px;
      height: 48px;
      border-radius: 50%;
    }
    .hotcontent {
      margin-left: 12px;
      > span {
        &:first-child {
          display: block;
          width: 140px;
          font-size: 14px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: 700;
          color: #000000;
        }
        &:last-child {
          width: 140px;
          display: block;

          margin-top: 10px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    .quantity {
      margin-left: 12px;

      > span {
        font-size: 14px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 500;
        color: #656f79;
      }
    }
    &:first-child {
      margin-top: 15px;
    }
  }
}
/* 滚动条整体样式 */
.hottool::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  width: 5px !important;
}

/* 滚动条滑块样式 */
.hottool::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 5px;
}

/* 滚动条轨道样式 */
.hottool::-webkit-scrollbar-track {
  background-color: #f7f9fa;
  height: 80% !important;
}

/* 鼠标悬停时滚动条轨道样式 */
.hottool::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}
</style>
